<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>小组项目报告(五)</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />

	<!-- Google Font -->
	<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

	<!-- Font Awesome Icons -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
		integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

	<!-- Main CSS -->
	<link href="../assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="../assets/css/vendor/aos.css" rel="stylesheet" />
	<style>
		body {
			background-color: rgb(236, 242, 247);
		}

		.h5s {
			width: 100%;
			height: 100px;
			background-color: rgb(104, 104, 104, 0.4);
			position: absolute;
			left: 0;
			top: 592px;
			pointer-events: none;
		}

		.urelimg {
			/* width: 50px; */
			box-shadow: 0px 26px 22px -11px rgba(255, 136, 0, 0.4);
		}

		.img {
			margin: 0;
		}

		.urelRimg {
			/* width: 50px; */
			box-shadow: 0px 26px 22px -11px rgba(255, 136, 0, 0.4);
			width: 60%;
			height: 65%;

			position: relative;
			top: -50px;
			left: 50px;
		}


		#carouselExampleIndicators {
			border: #a3a3a3;
		}
	</style>

</head>

<body>

	<!------------------------------------------
NAVBAR
------------------------------------------->


	<header>
		<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5  bg-danger position-relative">
			<div class="container-fluid text-white h-100">
				<div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
					<div class="col pt-4 pb-4">
						<h2 class="display-3">神领物流 <strong>项目报告</strong> &amp; 小组五</h2>
						<h5 class="font-weight-light mb-4">成员 冷祝基 朱泽源 陈一帆 夏亚楠 王浩 李凯 李宁</h5>
					</div>
					<div class="col align-self-bottom align-items-right text-right">
						<img src="../assets/img/demo/dashb2.png" class="rounded img-fluid">
					</div>
				</div>
			</div>
		</div>
		<svg
			style="-webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); margin-top: -1px;"
			version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
			y="0px" viewBox="0 0 1440 126" xml:space="preserve">
			<path class=" bg-danger" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z">
			</path>
		</svg>
	</header>


	<div style="width: 70%; margin: auto; margin-top: 200px; display: flex;" data-aos="fade-up">
		<div class="col-md-4" style="padding: 0;">
			<div class="media">
				<div class="iconbox iconmedium rounded-circle text-purple mr-4">
					<i class="fab fa-gulp"></i>
				</div>
				<div class="media-body">
					<h5>项目背景</h5>
					<p class="text-muted">
						1.业务扩张 2.产生问题 3.公司计划
					</p>
				</div>
			</div>
		</div>

		<div class="col-md-4">
			<div class="media">
				<div class="iconbox iconmedium rounded-circle text-info mr-4">
					<i class="fab fa-html5"></i>
				</div>
				<div class="media-body">
					<h5>项目开发目标</h5>
					<p class="text-muted">
						小组成员 完成各自分配的模块功能
					</p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="media">
				<div class="iconbox iconmedium rounded-circle text-info mr-4">
					<i class="fab fa-google"></i>
				</div>
				<div class="media-body">
					<h5>目标完成度</h5>
					<p class="text-muted">
						完美达成目标进度
					</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Main -->
	<div class="container pt-5 pb-5" data-aos="fade-up" style="margin-top: 150px;">
		<div class="row justify-content-center">
			<div class="col-md-8">
				<article>
					<h1><strong>项目</strong>简介</h1>
					<p>
						这是一个物流管理类的项目，用于帮助物流公司来进行日常的工作管理。
						项目的主要功能 包括 怎么存放、怎么配送、怎么跟进、怎么结算。等
					</p>
					<h3>模块功能的实现</h3>
					<p>
						根据上述项目的主要功能 我们出了如下几个具体的 项目模块
					</p>
					<figure class="text-center mt-4 mb-4 full-width">
						<div id="carouselExampleIndicators" class="carousel slide carousel-fade pt-3 pb-4" data-ride="carousel"
							data-aos="zoom-in-up" style="width: 70%; margin: auto; position: relative; margin-top: 50px; padding: 0;">
							<div class="row" data-aos=" data-aos">
								<ol class="carousel-indicators" style="z-index: 9999;">
									<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active" style="color: #a3a3a3;">
									</li>
									<li data-target="#carouselExampleIndicators" data-slide-to="1" style="color: #a3a3a3;"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="2" style="color: #a3a3a3;"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="3" style="color: #a3a3a3;"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="4" style="color: #a3a3a3;"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="5" style="color: #a3a3a3;"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="6" style="color: #a3a3a3;"></li>
								</ol>
								<div class="carousel-inner shadow-sm rounded">
									<div class="carousel-item active">
										<img class="d-block w-100 img" src="./img/CheLiang.png" alt="First slide">
										<div class="carousel-caption d-none d-md-block h5s">
											<h5>车辆管理模块</h5>
										</div>
									</div>
									<div class="carousel-item">
										<img class="d-block w-100 img" src="./img/CheXing.png" alt="Second slide">
										<div class="carousel-caption d-none d-md-block h5s">
											<h5>车型管理模块</h5>
										</div>
									</div>
									<div class="carousel-item">
										<img class="d-block w-100 img" src="./img/DingDan.png" alt="Third slide">
										<div class="carousel-caption d-none d-md-block h5s">
											<h5>订单管理模块</h5>
										</div>
									</div>
									<div class="carousel-item">
										<img class="d-block w-100 img" src="./img/PaiBan.png" alt="Third slide">
										<div class="carousel-caption d-none d-md-block h5s">
											<h5>排班管理模块</h5>
										</div>
									</div>
									<div class="carousel-item">
										<img class="d-block w-100 img" src="./img/SiJi.png" alt="Third slide">
										<div class="carousel-caption d-none d-md-block h5s">
											<h5>司机管理模块</h5>
										</div>
									</div>
									<div class="carousel-item">
										<img class="d-block w-100 img" src="./img/YunDan.png" alt="Third slide">
										<div class="carousel-caption d-none d-md-block h5s">
											<h5>运单管理模块</h5>
										</div>
									</div>
									<div class="carousel-item">
										<img class="d-block w-100 img" src="./img/YunFei.png" alt="Third slide">
										<div class="carousel-caption d-none d-md-block h5s">
											<h5>运费管理模块</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
						<figcaption class="figure-caption">项目模块展示</figcaption>
					</figure>

					<blockquote>
						<p>
							在整个项目的编写过程中我们组用到了如下技术完成：
							1.vue2 框架 2.git版本管理 3.gitee 码云远程协同编译
						</p>
					</blockquote>
					<blockquote>
						<p>
							vue2：项目框架的搭建是基于vue2进行搭建的
						</p>
					</blockquote>
					<blockquote>
						<p>
							git：版本管理软件，用来创建分支 分配模块任务，实现多人的协同开发，在一个阶段完成后 进行代码的合并
						</p>
					</blockquote>
					<blockquote>
						<p>
							gitee：一个远程仓单，用来存放各个分支提交的代码，便于项目代码的保存与管理，提高了开发过程中的可维护性
						</p>
					</blockquote>

				</article>
			</div>
		</div>
	</div>


	<div class="container pt-5 pb-5" data-aos="fade-up" style="margin-top: 200px;">
		<div class="row justify-content-center">
			<div class="col-md-8">
				<article>
					<h1><strong>项目模块</strong> 对应成员</h1>
					<p>
						下面为小组成员所完成的模块信息，和成员在项目开发中 担任角色和任务
					</p>
				</article>
			</div>
		</div>
	</div>

	<div style="width: 70%; margin: auto; display: flex; justify-content:space-around; margin-top: 150px;">
		<!-- Featured Card Blog -->
		<div class="card flex-md-row mb-4 box-shadow h-xl-300" style="width: 70%;">
			<div class="card-body d-flex flex-column align-items-start">
				<strong class="d-inline-block mb-2 text-purple">组长</strong>
				<h3 class="mb-0">
					<a class="text-dark" href="./work.html">冷祝基</a>
				</h3>
				<div class="mb-1 text-muted" style="margin-top: 20px;">
					负责任务：
				</div>
				<p class="card-text mb-auto">
					发布任务、 git版本合并、 解答组内问题、项目汇报、 汇报材料制作、 项目模块(排班管理)
				</p>
				<a class="text-gray" href="#">Continue reading</a>
			</div>
			<img class="card-img-right flex-auto d-none d-md-block urelRimg" src="./img/PaiBan.png">
		</div>
		<div class="container pt-5 pb-5" data-aos="fade-up"
			style="padding-top: 10px !important; padding-bottom: 10px !important;">
			<div class="text-center pt-3 pb-4">
				<h2>排班管理模块实现的功能</h2>
				<p class="text-muted">
					The functions implemented by the scheduling management module.
				</p>
			</div>
			<div class="row gap-y justify-content-center">
				<div class="col-md-5">
					<h5>搜索查找</h5>
					<p class="text-muted">
						遇到的难点 所属机构使用的是树形结构，需要使用JSON将它转化一下
					</p>
				</div>
				<div class="col-md-5">
					<h5>表格渲染</h5>
					<p class="text-muted">
						在做表格渲染的过程中 因为需要渲染大量的列数 所以使用到了v-for 来循环添加列
					</p>
				</div>
				<div class="col-md-5">
					<h5>添加排班模板</h5>
					<p class="text-muted">
						主要完成 对话框的数据处理 回填等逻辑
					</p>
				</div>
				<div class="col-md-5">
					<h5>批量关联</h5>
					<p class="text-muted">
						难点在于 判断是否由选中 员工，和请求接口的数据处理
					</p>
				</div>
			</div>
		</div>

	</div>

	<div style="width: 70%; margin: auto; display: flex; justify-content:space-around; margin-top: 150px;">

		<div class="container pt-5 pb-5" data-aos="fade-up"
			style="padding-top: 10px !important; padding-bottom: 10px !important;">
			<div class="text-center pt-3 pb-4">
				<h2>车型管理模块实现的功能</h2>
				<p class="text-muted">
					The functions implemented by the vehicle model management module.
				</p>
			</div>
			<div class="row gap-y justify-content-center">
				<div class="col-md-5">
					<h5>查询搜索</h5>
					<p class="text-muted">
						完成车型管理中的查询列表的功能 难点：下拉框的循环添加选项
					</p>
				</div>
				<div class="col-md-5">
					<h5>表格项的修改、删除</h5>
					<p class="text-muted">
						相对较难的点 在于修改时候的数据回填
					</p>
				</div>
				<div class="col-md-5">
					<h5>添加车型</h5>
					<p class="text-muted">
						添加功能中 表单验证较为复杂 需要认真填写
					</p>
				</div>
			</div>
		</div>
		<!-- Featured Card Blog -->
		<div class="card flex-md-row mb-4 box-shadow h-xl-300" style="width: 70%;">
			<div class="card-body d-flex flex-column align-items-start">
				<strong class="d-inline-block mb-2 text-purple">项目经理</strong>
				<h3 class="mb-0">
					<a class="text-dark" href="./car&&fee//车型管理.html">朱泽源</a>
				</h3>
				<div class="mb-1 text-muted" style="margin-top: 20px;">
					负责任务：
				</div>
				<p class="card-text mb-auto">
					解答组内问题、项目汇报材料制作、项目模块(车型管理)
				</p>
				<a class="text-gray" href="#">Continue reading</a>
			</div>
			<img class="card-img-right flex-auto d-none d-md-block urelRimg" src="./img/CheXing.png">
		</div>
	</div>

	<div style="width: 70%; margin: auto; display: flex; justify-content:space-around; margin-top: 150px;">
		<!-- Featured Card Blog -->
		<div class="card flex-md-row mb-4 box-shadow h-xl-300" style="width: 70%;">
			<div class="card-body d-flex flex-column align-items-start">
				<strong class="d-inline-block mb-2 text-purple">成员</strong>
				<h3 class="mb-0">
					<a class="text-dark" href="./project_car.html">陈奕帆</a>
				</h3>
				<div class="mb-1 text-muted" style="margin-top: 20px;">
					负责任务：
				</div>
				<p class="card-text mb-auto">
					汇报材料制作、 项目模块(车辆管理)
				</p>
				<a class="text-gray" href="#">Continue reading</a>
			</div>
			<img class="card-img-right flex-auto d-none d-md-block urelRimg" src="./img/CheLiang.png">
		</div>
		<div class="container pt-5 pb-5" data-aos="fade-up"
			style="padding-top: 10px !important; padding-bottom: 10px !important;">
			<div class="text-center pt-3 pb-4">
				<h2>车辆管理模块实现的功能</h2>
				<p class="text-muted">
					The functions implemented by the scheduling management module.
				</p>
			</div>
			<div class="row gap-y justify-content-center">
				<div class="col-md-5">
					<h5>启动/禁用 按钮</h5>
					<p class="text-muted">
						难点在于判断 车辆是否由绑定司机，当绑定了司机不能进行禁用 且给出提示
					</p>
				</div>
				<div class="col-md-5">
					<h5>分页导航</h5>
					<p class="text-muted">
						根据不同的分页查询不同的数据进行页面的渲染
					</p>
				</div>
				<div class="col-md-5">
					<h5>查看详情功能</h5>
					<p class="text-muted">
						详情的难点在于，需要通过路由跳转页面 ， 且要传递参数id
					</p>
				</div>
				<div class="col-md-5">
					<h5>配置司机</h5>
					<p class="text-muted">
						相较于上面的几个步骤，没有什么难点，平时的增、删、改、查
					</p>
				</div>
			</div>
		</div>

	</div>

	<div style="width: 70%; margin: auto; display: flex; justify-content:space-around; margin-top: 150px;"
		data-aos="fade-up">
		<!-- Author Card -->
		<div class="card shadow-sm border-0" style="width: 45%;">
			<img class=" card-img-top urelimg" src="./img/SiJi.png" alt="Card image cap">
			<div class="card-body text-center">
				<img class="rounded-circle shadow mt-neg5" src="./img/lzj.jpg" width="70">
				<h5 class="card-title">李宁</h5>
				<p class="card-text text-muted">
					司机管理
				</p>
				<p class="card-text text-muted">
					曾、删、改运费数据
				</p>
				<div class="text-center">
					<a target="_blank" href="./driver.html">
						<span class="iconbox iconsmall rounded-circle bg-danger text-white mr-1">
							<i class="fa fa-book-reader">
							</i>
						</span>
					</a>
				</div>
			</div>
		</div>
		<!-- Author Card -->
		<div class="card shadow-sm border-0" style="width: 40%;">
			<img class=" card-img-top urelimg" src="./img/DingDan.png" alt="Card image cap">
			<div class="card-body text-center">
				<img class="rounded-circle shadow mt-neg5" src="./img/lzj.jpg" width="70">
				<h5 class="card-title">夏亚楠</h5>
				<p class="card-text text-muted">
					订单管理
				</p>
				<p class="card-text text-muted">
					搜索重置：难点地址查询、查看详情：难点 根据不同包裹状态判断是否显示某些数据
				</p>
				<div class="text-center">
					<a target="_blank" href="./order.html">
						<span class="iconbox iconsmall rounded-circle bg-danger text-white mr-1">
							<i class="fa fa-book-reader">
							</i>
						</span>
					</a>
				</div>
			</div>
		</div>
	</div>

	<div style="width: 70%; margin: auto; display: flex; justify-content:space-around; margin-top: 150px;"
		data-aos="fade-up">
		<!-- Author Card -->
		<div class="card shadow-sm border-0" style="width: 40%;">
			<img class=" card-img-top urelimg" src="./img/YunFei.png" alt="Card image cap">
			<div class="card-body text-center">
				<img class="rounded-circle shadow mt-neg5" src="./img/lzj.jpg" width="70">
				<h5 class="card-title">王浩</h5>
				<p class="card-text text-muted">
					运费管理
				</p>
				<p class="card-text text-muted">
					曾、删、改运费数据
				</p>
				<div class="text-center">
					<a target="_blank" href="./car&&fee/运费管理.html">
						<span class="iconbox iconsmall rounded-circle bg-danger text-white mr-1">
							<i class="fa fa-book-reader">
							</i>
						</span>
					</a>
				</div>
			</div>
		</div>
		<!-- Author Card -->
		<div class="card shadow-sm border-0" style="width: 40%;">
			<img class=" card-img-top urelimg" src="./img/DingDan.png" alt="Card image cap">
			<div class="card-body text-center">
				<img class="rounded-circle shadow mt-neg5" src="./img/lzj.jpg" width="70">
				<h5 class="card-title">李凯</h5>
				<p class="card-text text-muted">
					订单管理
				</p>
				<p class="card-text text-muted">
					搜索重置：难点地址查询、查看详情：难点 根据不同包裹状态判断是否显示某些数据
				</p>
				<div class="text-center">
					<a target="_blank" href="./order.html">
						<span class="iconbox iconsmall rounded-circle bg-danger text-white mr-1">
							<i class="fa fa-book-reader">
							</i>
						</span>
					</a>
				</div>
			</div>
		</div>
	</div>

	<div style="margin-bottom: 150px;"></div>


	<!-- dark footer -->
	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
		<path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
			style="margin-top: 200px;">
		</path>
	</svg>
	<footer class="bg-black pb-5">
		<div class="container">
			<div class="row">
				<div class="col-12 col-md mr-4">
					<i class="fas fa-copyright text-white"></i>
					<small class="d-block mt-3 mb-3 text-muted">© 五组团队介绍</small>
				</div>
				<div class="col-6 col-md">
					<h5 class="mb-4 text-white">团队成员</h5>
					<ul class="list-unstyled text-small">
						<li style="font-weight: 900"><a class="text-muted" href="#">冷祝基</a></li>
						<li style="font-weight: 900"><a class="text-muted" href="#">朱泽源</a></li>
						<li><a class="text-muted" href="#">陈一帆</a></li>
						<li><a class="text-muted" href="#">夏亚楠</a></li>
						<li><a class="text-muted" href="#">王浩</a></li>
						<li><a class="text-muted" href="#">李凯</a></li>
					</ul>
				</div>
				<div class="col-6 col-md">
					<h5 class="mb-4 text-white">汇报材料制作</h5>
					<ul class="list-unstyled text-small">
						<li style="font-weight: 900"><a class="text-muted" href="#">冷祝基</a></li>
						<li style="font-weight: 900"><a class="text-muted" href="#">朱泽源</a></li>
						<li style="font-weight: 900"><a class="text-muted" href="#">陈一帆</a></li>
					</ul>
				</div>
				<div class="col-6 col-md">
					<h5 class="mb-4 text-white">完成项目模块</h5>
					<ul class="list-unstyled text-small">
						<li><a class="text-muted" href="#">订单管理</a></li>
						<li><a class="text-muted" href="#">运费管理</a></li>
						<li><a class="text-muted" href="#">车型管理</a></li>
						<li><a class="text-muted" href="#">车辆管理</a></li>
						<li><a class="text-muted" href="#">司机管理</a></li>
						<li><a class="text-muted" href="#">排班管理</a></li>
					</ul>
				</div>
			</div>
	</footer>

	<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
	<script src="../assets/js/vendor/jquery.min.js" type="text/javascript"></script>
	<script src="../assets/js/vendor/popper.min.js" type="text/javascript"></script>
	<script src="../assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
	<script src="../assets/js/functions.js" type="text/javascript"></script>

	<!-- Animation -->
	<script src="../assets/js/vendor/aos.js" type="text/javascript"></script>
	<noscript>
		<style>
			*[data-aos] {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
			}
		</style>
	</noscript>
	<script>
		AOS.init({
			duration: 700
		});
	</script>

	<!-- Disable animation on less than 1200px, change value if you like -->
	<script>
		AOS.init({
			disable: function () {
				var maxWidth = 1200;
				return window.innerWidth < maxWidth;
			}
		});
	</script>

</body>

</html>